<template>
    <div>
    <el-table v-loading="loading" :data="tableData" border script row-key="rowKey">
        <el-table-column label="SKU" prop="sku" min-width="200"></el-table-column>
            <el-table-column label="销售件数" prop="skuquantity" min-width="100"></el-table-column>
            <el-table-column label="售后件数" prop="OrderFeedbackTotal" min-width="100"></el-table-column>
            <el-table-column label="售后率" prop="proportion" min-width="100"></el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
            <template slot-scope="scope">
                <el-button type="text" icon="el-icon-search" @click="showAfterSaleDialog(scope.row,queryParams)">售后详情</el-button>
            </template>
        </el-table-column>
    </el-table>
    <SpuAfterSalesDialog v-model="dialog.visible" v-if="dialog.visible"  :type="dialog.type" :params="dialog.data"></SpuAfterSalesDialog>
    </div>
</template>

<script>
import SpuAfterSalesDialog from './SpuAfterSalesbDialog.vue'
export default {
    props: {
        queryParams: {
            type: Object,
            default: () => ({})
        },
        tableData: Array,
        loading: Boolean
    },
    components: { SpuAfterSalesDialog },
    data() {
        return {
            dialog: {
                visible: false,
                data: {},
            },
        }
    },
    methods: {
        showAfterSaleDialog(row,queryParams) {
            this.dialog.visible = true
            this.dialog.data = row
            this.dialog.type = queryParams
        },
    },
}
</script>

<style></style>
